<%--
  Created by IntelliJ IDEA.
  User: luo20
  Date: 2025/4/24
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>会员信息修改</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
/*    给tr下的第一个td进行文本居中，除了按钮行*/
    tr:not(#btn) td:first-child{
        text-align: center;
    }
    tr:not(#btn) td:nth-child(2){
        padding-left: 5px;
    }
    table{
        width: 25%;
        background-color: gray;
    }
    #btn td {
        text-align: center; /* 按钮在单元格中居中对齐 */
    }
    #btn input[type="button"],
    #btn input[type="reset"] {
        padding: 0px 12px;
        margin: 2px 40px 0px 0px;
        font-size: 14px;
        cursor: pointer;
    }

</style>
<body>
<form id="mainForm">
    <input type="hidden" name="id" value="${map.id}">
    <input type="hidden" name="m" value="${map.m}">
    <table border="1">
        <tr>
           <td colspan="2">
               <h3>会员信息</h3>
           </td>
        </tr>
        <tr>
            <td>
                <label>姓名：</label>
            </td>
            <td>
                <input type="text" name="mname">
            </td>
        </tr>
        <tr>
            <td>
                <label>性别：</label>
            </td>
            <td>
                <c:forEach items="${MembersInfoSexEnumList}" var="sex">
                    <input type="radio" name="mgender" value="${sex.value}"
                    >${sex.name}
                </c:forEach>
            </td>
        </tr>
        <tr>
            <td>
                <label>年龄：</label>
            </td>
            <td>
                <input type="text" name="mage">
            </td>
        </tr>
        <tr>
            <td>
                <label>家庭住址：</label>
            </td>
            <td>
                <input type="text" name="maddress">
            </td>
        </tr>
        <tr>
            <td>
                <label>Email：</label>
            </td>
            <td>
                <input type="text" name="memail">
            </td>
        </tr>
        <tr id="btn">
            <td colspan="2">
                <input type="button" value="修改" onclick="update()" id="put">
                <input type="reset" value="重置">
            </td>

        </tr>
    </table>
</form>
</body>
<script>
    $(function () {
        findById()
    })

    function findById() {
        //获取id
        let id = document.querySelector('input[name=id]').value // 从 map 里获取 id
            console.log(id)
        console.log($('input[name=m]').val())

        $.ajax({
            url: "/membersInfo/" +id,
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.code == 200) {
                    $("input[name='mname']").val(result.data.mname)
                    $("input[name='mage']").val(result.data.mage)
                    if (result.data.mgender == '男') {
                        $("input[name='mgender']:eq(0)").attr("checked", true)
                    } else {
                        $("input[name='mgender']:eq(1)").attr("checked", true)
                    }
                    $("input[name='maddress']").val(result.data.maddress)
                    $("input[name='memail']").val(result.data.memail)
                } else {
                    alert(result.message)
                }
            },
            error: function () {
                alert("请求失败")
            }
        })
    }

    function update() {
        let name = $("input[name='mname']").val()
        let age = $("input[name='mage']").val()
        let gender = $("input[name='mgender']:checked").val()
        let address = $("input[name='maddress']").val()
        let email = $("input[name='memail']").val()
        let id = $("input[name='id']").val()
    console.log(id)
        if (name == '') {
            alert("姓名不能为空")
            return
        }
        if (age == '') {
            alert("年龄不能为空")
            return
        }
        let genderStr;
        console.log(gender)
        if (gender == 1) {
            genderStr = "男"
        } else {
            genderStr = "女"
        }

        let membersInfo = JSON.stringify(
            {
                id: id,
                mname: name,
                mage: age,
                mgender: genderStr,
                maddress: address,
                memail: email
            }
        )
        let flag = confirm("确定修改吗？")
        if (flag) {
            // $.ajax({
            //     url: "/membersInfo/updateById?_method=PUT",
            //     type: "post",
            //     data: membersInfo,
            //     contentType: "application/json; charset=utf-8",
            //     dataType: 'json',//json 返回值类型
            //     success: function (result) {
            //         if (result.code == 200) {
            //             alert(result.message)
            //             window.location.href = "/index.jsp"
            //         } else {
            //             alert(result.message)
            //         }
            //     },
            //     error: function (xhr, status, error) {
            //         alert("请求失败")
            //         console.error("AJAX 错误:", status, error);
            //         console.log("服务器返回:", xhr.responseText);
            //     }
            // })

            $.ajax({
                url: "/membersInfo/updateById?_method=PUT",
                type: "post",
                data: $('#mainForm').serialize(),
                // contentType: "application/json; charset=utf-8",
                dataType: 'json',//json 返回值类型
                success: function (result) {
                    if (result.code == 200) {
                        alert(result.message)
                        window.location.href = "/index.jsp?message="+result.message
                    } else {
                        alert(result.message)
                    }
                },
                error: function (xhr, status, error) {
                    alert("请求失败")
                    console.error("AJAX 错误:", status, error);
                    console.log("服务器返回:", xhr.responseText);
                }
            })
        }
    }
</script>
</html>
